import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import './musicList.scss'
class MusicList extends Component {
  checkMusic (item) {
    this.props.checkMusic(item)
  }

  render () {
    let List = this.props.musicList.map((item) => (
      <li key={ item.id } className={item === this.props.musicItem ? 'active' : ''} onClick={ this.checkMusic.bind(this, item) }>
        { item.title } -- { item.artist }
        <div className="delete">
          <div>x</div>
        </div>
      </li>
    ))
    return (
      <div className="music-list">
        <Link to="/">返回</Link>
        <h4>播放列表</h4>
        <ul>
          { List }
        </ul>
      </div>
    )
  }
}
export default MusicList
